<template>
  <view class="order-details">
    <view class="order-details-header">
      <view class="status">{{ orderDetails.orderStatus }}</view>
      <view class="location">{{ orderDetails.parkingIotName }}</view>

      <view class="order-amount">
        <view class="label">订单金额</view>
        <view class="amount">¥{{ orderDetails.orderAmount }}</view>
      </view>
    </view>

    <view class="order-info">
      <view class="info-title">订单信息</view>
      <view class="info-item">
        <text class="item-label">车牌号码</text>
        <text class="item-value">{{ orderDetails.licensePlateNumber }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">下单时间</text>
        <text class="item-value">{{ orderDetails.orderPaymentTime }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">选择日期</text>
        <text class="item-value">{{ orderDetails.packageUseDate }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">有效时段</text>
        <text class="item-value">{{ orderDetails.packageValidPeriod }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">支付方式</text>
        <text class="item-value">微信</text>
      </view>
      <view class="info-item">
        <text class="item-label">订单号</text>
        <text class="item-value">{{ orderDetails.orderNumber }}</text>
      </view>
    </view>

    <view class="bottom-button">
      <view
        v-if="orderDetails.orderStatus === '已支付'"
        class="borderSty"
        style="border-color: #999999; color: #999999"
        @click="applyOrder"
        >申请退款</view
      >
      <view
        v-if="orderDetails.orderStatus === '待支付'"
        class="borderSty"
        style="border-color: #999999; color: #999999"
        @click="cancelOrder"
        >取消订单</view
      >
      <view class="borderSty" @click="rebuy">再次购买</view>
      <view v-if="orderDetails.orderStatus === '待支付'" class="fillSty" @click="pay">去支付</view>
    </view>

    <!-- 取消订单 -->
    <u-popup
      :show="showCancel"
      @close="closeCancel"
      mode="center"
      :round="10"
      safeAreaInsetBottom="false"
    >
      <view class="cancel-order-popup">
        <view class="cancel-order-popup-title">取消订单</view>
        <view class="cancel-order-popup-content">
          <text>剩余车位有限，确定要取消订单吗？</text>
        </view>
        <view class="cancel-order-popup-button">
          <view class="cancel-order-popup-button-cancel" @click="closeCancel"
            >取消</view
          >
          <view
            class="cancel-order-popup-button-confirm"
            @click="sureCancelOrder"
            >确定</view
          >
        </view>
      </view>
    </u-popup>

    <!-- 申请退款 -->
    <u-popup
      :show="showReturn"
      @close="closeReturn"
      mode="center"
      :round="10"
      safeAreaInsetBottom="false"
    >
      <view class="return-order-popup">
        <view class="cancel-order-popup-title">申请退款</view>
        <view class="cancel-order-popup-content">
          <view
            >退款金额
            <text style="color: #f36718; font-size: 28rpx"
              >¥{{ orderDetails.orderAmount }}</text
            ></view
          >
          <text>退款后金额原路退回，确定要退款吗？</text>
        </view>
        <view class="cancel-order-popup-button">
          <view
            class="cancel-order-popup-button-cancel"
            @click="sureReturnOrder"
            >退款</view
          >
          <view class="cancel-order-popup-button-confirm" @click="closeReturn"
            >不退款</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      orderId: "",
      orderDetails: {},
      showReturn: false,
      showCancel: false,
    };
  },
  onLoad(options) {
    this.orderId = options.orderId;
    this.getOrderDetails();
  },
  methods: {
    closeCancel() {
      this.showCancel = false;
    },
    closeReturn() {
      this.showReturn = false;
    },
    getOrderDetails() {
      this.$httpReq
        .confirmSelfOrderDetails("/api/order/query/details/" + this.orderId)
        .then((res) => {
          console.log(res);
          this.orderDetails = res.data;
        });
    },

    // 取消订单
    sureCancelOrder() {
      this.$httpReq
        .cancelSureOrder("/api/order/cancel/" + this.orderId)
        .then((res) => {
          console.log(res);
          this.showCancel = false;
          this.getOrderDetails();
          this.$u.toast("取消订单成功");
        });
    },
    // 确认退款
    sureReturnOrder() {
      this.$httpReq
        .sureReturnOrder("/api/order/return/" + this.orderId)
        .then((res) => {
          console.log(res);
          this.showReturn = false;
          this.getOrderDetails();
          this.$u.toast("退款成功");
        });
    },

    applyOrder() {
      console.log("申请退款");
      this.showReturn = true;
    },
    cancelOrder() {
      console.log("取消订单");
      this.showCancel = true;
    },
    rebuy() {
      console.log("再次购买");
    },
    pay() {
      console.log("去支付");
    },
  },
};
</script>

<style lang="scss" scoped>
.order-details {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .order-details-header {
    width: 100%;
    height: 200rpx;
    background-color: #4c4d53;
    position: relative;
    margin-bottom: 60rpx;
	text-indent: 20rpx;
    .status {
      font-size: 32rpx;
      color: #fff;
      padding: 20rpx;
    }
    .location {
      font-size: 28rpx;
      color: #fff;
      padding: 0 20rpx 20rpx;
    }

    .order-amount {
      width: calc(100% - 80rpx);
      margin: 0 auto;
      background-color: #fff;
      padding: 30rpx 20rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: -35rpx;
      left: 0;
      right: 0;

      .amount {
        color: #ff6b35;
        font-size: 32rpx;
      }
    }
  }

  .return-order-popup {
    width: 460rpx;
    height: 350rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 8rpx;
    .cancel-order-popup-title {
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 60rpx;
      margin-top: 20rpx;
    }
    .cancel-order-popup-content {
      width: 100%;
      text-align: center;
      font-size: 28rpx;
      margin-bottom: 60rpx;
    }
    .cancel-order-popup-button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cancel-order-popup-button-cancel {
        width: 160rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        border: 1rpx solid #f36718;
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
        font-size: 24rpx;
        color: #f36718;
        margin-left: 10rpx;
      }
      .cancel-order-popup-button-confirm {
        width: 160rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        background: #f36718;
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
        font-size: 24rpx;
        color: #ffffff;
        margin-left: 10rpx;
      }
    }
  }
  .cancel-order-popup {
    width: 450rpx;
    height: 350rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 8rpx;
    .cancel-order-popup-title {
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 80rpx;
      margin-top: 20rpx;
    }
    .cancel-order-popup-content {
      width: 100%;
      text-align: center;
      font-size: 28rpx;
      margin-bottom: 80rpx;
    }
    .cancel-order-popup-button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cancel-order-popup-button-cancel {
        width: 160rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        border: 1rpx solid #f36718;
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
        font-size: 24rpx;
        color: #f36718;
        margin-left: 10rpx;
      }
      .cancel-order-popup-button-confirm {
        width: 160rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        background: #f36718;
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
        font-size: 24rpx;
        color: #ffffff;
        margin-left: 10rpx;
      }
    }
  }
  ::v-deep .u-safe-bottom {
    display: none !important;
  }

  .order-info {
    width: calc(100% - 80rpx);
    margin: 0 auto;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 8rpx;

    .info-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .info-item {
      display: flex;
      justify-content: space-between;
      padding: 15rpx 0;
      font-size: 28rpx;

      .item-label {
        color: #666;
      }

      .item-value {
        color: #333;
      }
    }
  }

  .bottom-button {
    width: 100%;
    height: 160rpx;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    right: 0;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;

    .borderSty {
      width: 100rpx;
      height: 30rpx;
      line-height: 30rpx;
      text-align: center;
      border: 1rpx solid #f36718;
      border-radius: 30rpx;
      padding: 10rpx 20rpx;
      font-size: 24rpx;
      color: #f36718;
      margin-left: 10rpx;
    }
    .fillSty {
      width: 100rpx;
      height: 30rpx;
      line-height: 30rpx;
      text-align: center;
      background: #f36718;
      border-radius: 30rpx;
      padding: 10rpx 20rpx;
      font-size: 24rpx;
      color: #ffffff;
      margin-left: 10rpx;
    }
  }
}
</style>


